<template>
  <div class="content">
    <!--  首页轮播图  -->
    <Carousel />
    <!--  首页搜索医院的表单区域  -->
    <Search @getHospitalList="getHospitalList" />
    <!--    底部展示医院结构-->
    <div class="info">
      <el-row :gutter="20">
        <el-col :span="20">
          <!--     等级组件      -->
          <Level @sendLevel="getLevel" />
          <Region @sendRegion="getRegion" />
          <!--      展示医院结构     -->
          <div v-if="hospitalList.length > 0" class="hospital">
            <Card
              v-for="item in hospitalList"
              :key="item.id"
              :hospitalInfo="item"
              class="hospitalCarItem"
            />
          </div>
          <el-empty v-else description="无数据" />
          <div>
            <!--           分页组件 -->
            <el-pagination
              v-model:current-page="pageNum"
              v-model:page-size="pageSize"
              :background="true"
              :disabled="false"
              :page-sizes="[10, 20, 30, 40]"
              :small="false"
              :total="total"
              layout=" prev, pager, next, jumper,->,sizes,total"
              @currentChange="getHospitalList"
              @sizeChange="getHospitalList"
            />
          </div>
        </el-col>
        <el-col :span="4">
          <Tip />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script lang="ts" name="Home" setup>
import Carousel from "@/pages/home/carousel/index.vue";
import Search from "@/pages/home/search/index.vue";
import Level from "@/pages/home/level/index.vue";
import Region from "@/pages/home/region/index.vue";
import Card from "@/pages/home/card/index.vue";
import Tip from "@/pages/home/tip/index.vue";

// 导入接口
import { doGetHospitalList } from "@/api/home";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
// 导入类型
import { Hospital, Result } from "@/types/types.ts";

// 页码
let pageNum = ref<number>(1);
// 记录数
let pageSize = ref<number>(10);
// 总记录数
let total = ref<number>(0);

let hostype = ref<string>("");
let districtCode = ref<string>("");

// 医院列表
let hospitalList = ref<Array<Hospital>>([]);

// 挂在完成
onMounted(() => {
  // 获取医院列表
  getHospitalList("");
});
// 获取医院列表
const getHospitalList = async (hosname: string) => {
  let result: Result = await doGetHospitalList(
    pageNum.value,
    pageSize.value,
    hostype.value,
    districtCode.value,
    hosname,
  );
  if (result.code === 200) {
    pageSize.value = result.data.size;
    pageNum.value = result.data.number + 1;
    total.value = result.data.totalElements;
    hospitalList.value = result.data.content;
  } else {
    ElMessage.error("无数据");
  }
  console.log("result", result);
};

//  获取子组件传过来的 医院等级
const getLevel = (level: string) => {
  console.log("父获取到了level", level);
  hostype.value = level;
  getHospitalList();
};
// 获取子组件传过来的区域值
const getRegion = (region: string) => {
  console.log("父获取到了region", region);
  districtCode.value = region;
  getHospitalList();
};
</script>

<style lang="scss" scoped>
.content {
  margin-top: 70px;
  width: 1200px;
  min-height: 700px;

  .hospital {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .hospitalCarItem {
      width: 48%;
      margin: 10px 0;
    }
  }
}
</style>
